<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>06_数据劫持-数据绑定</title>
    <!--
    1. 数据绑定
      * 初始化显示: 页面(表达式/指令)能从data读取数据显示 (编译/解析)
      * 更新显示: 更新data中的属性数据==>页面更新
  --></head>
  <body>
    <div id="app">
      <p>{{count}}</p>
      <button v-on:click="handleClick">按钮</button>
    </div>
    <script src="./js/compile.js"></script>
    <script src="./js/observer.js"></script>
    <script src="./js/watcher.js"></script>
    <script src="./js/mvvm.js"></script>
    <script>
      /* 
        每一个模板语法（除了事件指令以外）都有自己的watcher
        每一个data数据都有自己的dep

        watcher里面会相应dep的
          目的：为了防止重复存储
        dep里面会相应watcher的
          目的：为了通过watcher找到cb，cb就是更新用户界面的方法
      */
      debugger;
      new MVVM({
        // el: "#app",
        el: document.getElementById("app"),
        data: {
          count: 0,
        },
        methods: {
          handleClick() {
            this.count++;
          },
        },
      });
    </script>
  </body>
</html>
